<template>
  <view>
    <view class="about" @click="showPop" :style="{display:about}">
      <view class="content">
        <view class="img">
          <image src="../../static/images/index-icon/title.png"></image>
        </view>
        <view class="font">帮帮忙团队</view>
        <view class="font1">校 园 失 物 招 领 平 台</view>
        <view class="headImg">
          <!-- <image :src="lose.headImg"></image> -->
          <image :src="headImg"></image>
        </view>
        <view class="font1">{{lose.issueName}}</view>
        <!-- <view class="font1">手机号：{{lose.callOrVx}}</view> -->
        <view class="font1">手机号：{{callOrVx}}</view>
        <view class="font2">请添加好友/通话 - 后介绍物品的详细信息,慎防诈骗</view>
      </view>
    </view>

    <view class="content">
      <view class="title">
        <view class="font">
          标题丨{{lose.title}}
        </view>
      </view>
      <view :style="{display: 'flex'}">
        <view class="icon">
          <image src="../../static/images/index-icon/xy.png"
            :style="{height: '50rpx', width: '50rpx', marginTop: '28rpx', marginLeft: '30rpx'}"></image>
        </view>
        <!-- <view class="zjff">{{lose.schoolId}}</view> -->
        <view class="zjff">{{schoolId}}</view>
      </view>
      <view class="img">
        <image :src="lose.indexImg" mode="widthFix"></image>
        <!-- v-if="lose.image!=''" -->
        <!--      <image src="../../static/images/img/noImg.png" v-else :style="{width: '350rpx', height: '350rpx'}"></image> -->
      </view>

      <view class="text">
        拾取位置丨{{lose.location}}
      </view>

      <view class="text">
        <!-- 当前位置丨{{lose.addRess}} -->
        当前位置丨{{lose.location}}
      </view>

      <view class="text" :style="{display: 'flex'}">
        <view :style="{width: '110px'}">信息备注丨</view>
        <view>{{lose.remarks}}</view>
      </view>
    </view>

    <view class="user">
      <view class="headImg">
        <!-- <image :src="lose.headImg"></image> -->
        <image :src="headImg"></image>
      </view>
      <view class="userName">{{lose.issueName}}</view>
      <view class="button" @click="showPop">认领</view>
      <!-- v-if="lose.upshot=='认领中'" -->
      <!-- <view class="button1" wx:if="{{lose.upshot=='认领中'}}">拒绝联系</view> -->
      <!--      <view v-else class="ok">
        <image src="../../static/images/index-icon/ok.png"></image>
      </view> -->
    </view>

    <view class="detail">
      <view class="title">物品详情丨</view>
      <!--    <view class="font1">物品类型：{{lose.nowThing}}</view>
      <view class="font1">认领状态：{{lose.upshot}}</view> -->
      <view class="font1">物品类型：关羽</view>
      <view class="font1">认领状态：认领中</view>
      <view class="image">
        <image src="../../static/images/index-icon/title.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        lose: {},
        about: "none",
        headImg: 'https://img.wxcha.com/m00/12/db/594dd9fb43029a58df9acc0e4591d94b.jpg?down',
        callOrVx: '158 8848钛金手机',
        schoolId: '帝国理工学院'
      }
    },
    methods: {
      async onLoad(option) {
        uni.showLoading({
          title: '数据加载中...',
        })
        console.log(option.id)
        // this.loseId = option.id

        const {
          data: res
        } = await uni.request({
          url: 'http://8.130.114.82:5555/bbm/findowner/info/' + option.id,
        })

        this.lose = res.findOwner
        uni.hideLoading() //隐藏正在加载中
      },


      showPop() {
        if (this.about === "none") {
          this.about = "block"

        } else {
          this.about = "none"
        }
      },

    }
  }
</script>

<style lang="scss">
  .about {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    height: 1500rpx;
    width: 100%;
  }

  .about .content {
    background-color: #fff;
    height: 850rpx;
    width: 90%;
    border-radius: 30rpx;
    margin: 0 auto;
    margin-top: 220rpx;
    text-align: center;
  }

  .about .content .img image {
    width: 150rpx;
    height: 150rpx;
    margin-top: 50rpx;
  }

  .about .content .font {
    font-weight: bold;
    font-size: 40rpx;
  }

  .about .content .font1 {
    color: #919191;
    margin-top: 20rpx;
    font-size: 30rpx;
  }

  .about .content .font2 {
    color: #919191;
    margin-top: 100rpx;
    font-size: 24rpx;
  }

  .about .content .headImg image {
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    margin-top: 130rpx;
  }

  /* 正文内容 */

  .content {
    background-color: #fff;
    border-radius: 30rpx;
    width: 90%;
    margin: 0 auto;
    margin-top: 30rpx;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
    padding-bottom: 40rpx;
  }

  .content .title {
    width: 90%;
    font-size: 42rpx;
    margin-top: 20rpx;
    margin-left: 40rpx;
    font-weight: bold;
    /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis; */
  }

  .content .img image {
    width: 90%;
    border-radius: 30rpx;
    margin: 30rpx;
  }

  .zjff {
    background-color: #ffd23c;
    width: 420rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 50rpx;
    margin-top: 25rpx;
    margin-left: 5rpx;
    font-size: 30rpx;
  }

  .content .text {
    margin-left: 30rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.753);
    margin-bottom: 20rpx;
  }

  /* 用户界面 */
  .user {
    border-radius: 30rpx;
    width: 90%;
    height: 180rpx;
    background-color: #fff;
    margin: 20rpx auto;
    display: flex;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
  }

  .user .headImg image {
    width: 100rpx;
    height: 100rpx;
    margin-top: 40rpx;
    margin-left: 40rpx;
    border-radius: 50%;
    border: gray 5rpx solid;
  }

  .user .userName {
    font-size: 36rpx;
    margin-top: 70rpx;
    margin-left: 10rpx;
  }

  .user .button {
    border-radius: 30rpx;
    margin-top: 60rpx;
    margin-left: 210rpx;
    height: 65rpx;
    width: 170rpx;
    font-weight: bold;
    text-align: center;
    line-height: 65rpx;
    background-color: #ffeb37;
  }

  .user .button1 {
    border-radius: 30rpx;
    margin-top: 60rpx;
    margin-left: 210rpx;
    height: 65rpx;
    width: 170rpx;
    font-weight: bold;
    text-align: center;
    line-height: 65rpx;
    background-color: #cecece;
  }

  .detail {
    border-radius: 30rpx;
    background-color: #fff;
    margin: 40rpx;
    width: 300rpx;
    height: 350rpx;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
  }

  .detail .title {
    margin-left: 30rpx;
    margin-top: 20rpx;
    color: gray;
    font-size: 38rpx;
  }

  .detail .font1 {
    margin-left: 30rpx;
    margin-top: 20rpx;
    color: gray;
    font-size: 28rpx;
  }

  .detail .image image {
    width: 120rpx;
    height: 120rpx;
    margin-left: 30rpx;
    margin-top: 15rpx;
  }

  .ok image {
    width: 130rpx;
    height: 130rpx;
    margin-left: 300rpx;
    margin-top: 26rpx;
  }
</style>